{% from "dropdown-menu.njk" import dropdown_menu %}

<section id="dropdown-menu"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Dropdown Menu</h2>
    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-wrap items-start gap-4">
      {% call dropdown_menu(
        id="dropdown-menu-default",
        trigger="Open",
        trigger_attrs={"class": "btn-outline"},
        popover_attrs={"class": "min-w-56"}
      ) %}
        <div role="group" aria-labelledby="account-options">
          <div role="heading" id="account-options">My Account</div>
          <div role="menuitem">
            Profile
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
          </div>
          <div role="menuitem">
            Billing
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
          </div>
          <div role="menuitem">
            Settings
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
          </div>
          <div role="menuitem">
            Keyboard shortcuts
            <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘K</span>
          </div>
        </div>
        <hr role="separator">
        <div role="menuitem">GitHub</div>
        <div role="menuitem">Support</div>
        <div role="menuitem" aria-disabled="true">API</div>
        <hr role="separator">
        <div role="menuitem">
          Logout
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </div>
      {% endcall %}

      {% call dropdown_menu(
        id="dropdown-menu-checkboxes",
        trigger="Checkboxes",
        trigger_attrs={"class": "btn-outline"},
        popover_attrs={"class": "min-w-56"}
      ) %}
      <div role="group" aria-labelledby="account-options">
        <div role="heading" id="account-options">Account Options</div>
        <div role="menuitem">
          {% lucide "user" %}
          Profile
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </div>
        <div role="menuitem">
          {% lucide "credit-card" %}
          Billing
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
        </div>
        <div role="menuitem">
          {% lucide "settings" %}
          Settings
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
        </div>
      </div>
      <hr role="separator">
      <div role="group" aria-labelledby="appearance-options">
        <div role="heading" id="appearance-options">Appearance</div>
        <div
          role="menuitemcheckbox"
          aria-checked="true"
          class="group"
        >
          {% lucide "check", {
            "class": "invisible group-aria-checked:visible",
            "aria-hidden": "true",
            "focusable": "false"
          } %}
          Status Bar
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </div>
        <div
          role="menuitemcheckbox"
          aria-checked="false"
          class="group"
          aria-disabled="true"
        >
          {% lucide "check", {
            "class": "invisible group-aria-checked:visible",
            "aria-hidden": "true",
            "focusable": "false"
          } %}
          Activity Bar
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
        </div>
        <div
          role="menuitemcheckbox"
          aria-checked="false"
          class="group"
        >
          {% lucide "check", {
            "class": "invisible group-aria-checked:visible",
            "aria-hidden": "true",
            "focusable": "false"
          } %}
          Panel
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
        </div>
      </div>
      <hr role="separator">
      <div role="menuitem">
        {% lucide "log-out" %}
        Logout
        <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
      </div>
      {% endcall %}

      <script>
        (() => {
          const dropdownMenu = document.querySelector('#dropdown-menu-checkboxes');
          const checkboxes = dropdownMenu.querySelectorAll('div[role="menuitemcheckbox"]');
          checkboxes.forEach(checkbox => {
            checkbox.addEventListener('click', () => {
              const isChecked = checkbox.getAttribute('aria-checked') === 'true';
              checkbox.setAttribute('aria-checked', !isChecked);
            });
          });
        })();
      </script>

      {% set profile_menu %}
        <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
          <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
          <div class="grid flex-1 text-left text-sm leading-tight">
            <span class="truncate font-medium">hunvreus</span>
            <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
          </div>
        </div>
        <hr role="separator">
        <div role="menuitem">
          {% lucide "star" %}
          Upgrade to Pro
        </div>
        <hr role="separator">
        <div role="menuitem">
          {% lucide "user" %}
          Account
        </div>
        <div role="menuitem">
          {% lucide "credit-card" %}
          Billing
        </div>
        <div role="menuitem">
          {% lucide "bell" %}
          Notifications
        </div>
        <hr role="separator">
        <div role="menuitem">
          {% lucide "log-out" %}
          Signout
        </div>
      {% endset %}

      {% call dropdown_menu(
        id="dropdown-menu-radio-group",
        trigger="Radio Group",
        trigger_attrs={"class": "btn-outline"},
        popover_attrs={"class": "min-w-56"}
      ) %}
      <div role="group" aria-labelledby="position-options">
        <span id="position-options" role="heading">Panel Position</span>
        <hr role="separator">
        <div
          role="menuitemradio"
          aria-checked="false"
          class="group"
        >
          <div class="size-4 flex items-center justify-center">
            <div
              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
              aria-hidden="true",
              focusable="false"
            ></div>
          </div>
          Status Bar
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⇧⌘P</span>
        </div>
        <div
          role="menuitemradio"
          aria-checked="true"
          class="group"
        >
          <div class="size-4 flex items-center justify-center">
            <div
              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
              aria-hidden="true",
              focusable="false"
            ></div>
          </div>
          Activity Bar
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘B</span>
        </div>
        <div
          role="menuitemradio"
          aria-checked="false"
          class="group"
        >
          <div class="size-4 flex items-center justify-center">
            <div
              class="size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
              aria-hidden="true",
              focusable="false"
            ></div>
          </div>
          Panel
          <span class="text-muted-foreground ml-auto text-xs tracking-widest">⌘S</span>
        </div>
      </div>
      {% endcall %}
      <script>
        (() => {
          const dropdownMenu = document.querySelector('#dropdown-menu-radio-group');
          const radioButtons = dropdownMenu.querySelectorAll('div[role="menuitemradio"]');
          radioButtons.forEach(radioButton => {
            radioButton.addEventListener('click', () => {
              radioButtons.forEach(radioButton => {
                radioButton.setAttribute('aria-checked', 'false');
              });
              radioButton.setAttribute('aria-checked', 'true');
            });
          });
        })();
      </script>

      {% set trigger %}
        <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
        <div class="grid flex-1 text-left text-sm leading-tight">
          <span class="truncate font-medium">hunvreus</span>
          <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
        </div>
        {% lucide "chevrons-up-down", { "class": "text-muted-foreground ml-auto" } %}
      {% endset %}
      {% call dropdown_menu(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-outline h-12 justify-start px-2 md:max-w-[200px]"}
      ) %}
        {{ profile_menu | safe }}
      {% endcall %}

      {% set trigger %}
        <img alt="@hunvreus" src="https://github.com/hunvreus.png" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
      {% endset %}
      {% call dropdown_menu(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-icon-ghost rounded-full size-8"},
        popover_attrs={"data-align": "end"}
      ) %}
        {{ profile_menu | safe }}
      {% endcall %}

      {% set trigger %}
        {% lucide "ellipsis" %}
      {% endset %}
      {% call dropdown_menu(
        id="dropdown-checkboxes",
        trigger=trigger,
        trigger_attrs={"class": "btn-icon-ghost"},
        popover_attrs={"class": "min-w-32"}
      ) %}
        <div role="menuitem">
          {% lucide "pencil" %}
          Edit
        </div>
        <div role="menuitem">
          {% lucide "share" %}
          Share
        </div>
        <hr role="separator">
        <div role="menuitem" class="text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive">
          {% lucide "trash-2" %}
          Delete
        </div>
      {% endcall %}
    </div>
  </div>
</section>